<!-- 创建时间: 2020年12月26日 星期六 21:43 -->
<template>
    <div class='myExamination_container'>
        <div class="message" v-show="examinationInfo.length==0">暂无考试</div>
        <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :md="6" v-for="(item, index) in examinationInfo" :key="index">
                <el-card class="box-card">
                    <div class="test">{{item[0]}}</div><p></p>
                    <el-tag>{{item[1]}}</el-tag> -
                    <el-tag type="danger">{{item[2]}}</el-tag><p></p>
                    <el-tooltip v-if="item[3]=='null'" class="item" effect="dark" content="教师未添加试题无法开考" placement="top">
                        <el-tag type="danger" round >无法开考</el-tag>
                    </el-tooltip>
                    <el-tag v-else-if="item[3]=='noExamination'">等待开考</el-tag>  
                    <el-tag v-else-if="item[3]=='isAnswer'">你已完成本次考试</el-tag>
                    <!-- item[3]!='null' && item[3]!='isAnswer' && item[3]!='noExamination' -->
                    <el-button v-else type="primary" @click="startExamination(item[3], item[2], item[0])" >开始考试</el-button>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            userName:"",
            userNumebr:"",
            examinationInfo: [],// 考试信息列表
        }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
    },
    //方法集合
    methods: {
        // 自动获取考试信息
        autoGetExaminationInfo() {
            if(this.userNumebr == "" || this.userName == "" || !JSON.parse(sessionStorage.getItem('flag'))) return;
            let classNumber = this.userNumebr.substring(0, 7);
            this.$http.post("autoGetExaminationInfo", { classNumber: classNumber, studentNumber: this.$store.getters.getUserNumber }).then(res => {
                if(res.bodyText!=""){
                    let arr = JSON.parse(res.bodyText);
                    for (let i = 0; i < arr.length; i++) {
                        this.examinationInfo[i] = arr[i].split(",");
                    }
                    this.$forceUpdate();
                }
            });
        },
        startExamination(questionBank, endTime, coursesName){
            this.$store.commit("setStartExaminationNumber", questionBank);
            this.$store.commit("setEndTime", endTime);
            this.$router.push({
                path:"/student/startExamination",
                query:{coursesName:coursesName}
            });
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.userName = this.$store.getters.getUserName;
        this.userNumebr = this.$store.getters.getUserNumber;
        this.autoGetExaminationInfo();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    //当data中定义的数据有变化时就会加载updated方法
    updated() {},
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
.myExamination_container {
    padding: 10px 10px;
    .message{
        text-align: center;
        font-size: 20px;
        color: darkgray;
    }
    .box-card{
        text-align: center;
        justify-content: center;
        .test{
            width: 100px;
            line-height: 100px;
            border-radius: 50px;
            background: #409EFF;
            margin: auto;
            font-size: 20px;
            color: white;
        }
    }
    .box-card:hover{
        border:1px solid sandybrown;
    }
}
</style>